<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                width: 800px;

                border: 1px red solid;
                /*
                    text-align 文本的水平对齐
                            可选值:
                                left 左侧对齐
                                right 右对齐
                                center
                                justify 两端对齐
                */
                /*text-align: center;*/
                /*text-align: justify;*/

                font-size: 50px;
            }

            span {
                font-size: 20px;
                border: 1px blue solid;

                /*
                    vertical-align 设置元素垂直对齐的方式
                           可选值:
                                baseline 默认值 基线对齐(基线就是文字底下对齐的边，但是这个基线是隐藏的)
                                top 顶部对齐
                                bottom 底部对齐
                                middle 居中对齐
                */
                vertical-align: top;
            }

            p {
                border: 1px red solid;
            }

            img {
                /*设置图片垂直对齐的话,可以解决基线问题*/
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <div>今天天气 Hello <span>真不错 Hello</span>!</div>
        <!--        <div>-->
        <!--            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dicta eos id magni nemo nihil nulla-->
        <!--            pariatur, perferendis rerum sed sunt velit, voluptas voluptatem. Ab accusamus consectetur culpa, eaque natus-->
        <!--            nostrum numquam omnis optio quas soluta tempora tempore temporibus ullam veniam veritatis? Fugit obcaecati-->
        <!--            quae quibusdam. Alias aspernatur blanditiis consequuntur dolorem doloribus eaque eius est, eveniet facilis-->
        <!--            fugiat harum, illo ipsam iure magnam magni minima necessitatibus neque nisi nobis perferendis perspiciatis-->
        <!--            placeat quas quia quidem repellendus sit soluta totam ut vero voluptates. Asperiores blanditiis culpa dicta-->
        <!--            eius fuga obcaecati officia quasi repellendus suscipit ut? Eaque harum possimus qui quo recusandae.-->
        <!--        </div>-->

        <p>
            <img src="./img/an.jpg" alt="">
        </p>
    </body>
</html>